<template>
    <div class="ssl-certificate-parser">
        <!-- 主要工作区域 -->
        <div class="main-workspace">
            <div class="workspace-grid">
                <!-- 输入区域 -->
                <div class="workspace-card input-card">
                    <div class="card-header">
                        <div class="card-title">
                            <div class="title-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 18.9609 21.7893 19.3359 21.4142C19.7109 21.0391 19.9219 20.5304 19.9219 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M18.5 2.5C18.8978 2.10217 19.4374 1.87868 20 1.87868C20.5626 1.87868 21.1022 2.10217 21.5 2.5C21.8978 2.89782 22.1213 3.43739 22.1213 4C22.1213 4.56261 21.8978 5.10217 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="title-text">
                                <h3>证书内容</h3>
                                <p>粘贴您的 PEM 格式证书内容</p>
                            </div>
                        </div>
                        <div class="card-actions">
                            <c-button size="small" @click="clearAll" class="clear-btn">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3 6H5H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                清空
                            </c-button>
                        </div>
                    </div>
                    
                    <div class="card-content">
                        <c-input-text
                            v-model:value="certificateInput"
                            :rows="20"
                            placeholder="在此处粘贴您的 PEM 格式证书内容...

例如：
-----BEGIN CERTIFICATE-----
MIIDvTCCAqWgAwIBAgIUP6iVhsEmuWBk7grduJepPpbUj1owDQYJKoZIhvcNAQEL
BQAwdTELMAkGA1UEBhMCQ04xEDAOBgNVBAgMB0JlaWppbmcxEDAOBgNVBAcMB0Jl
aWppbmcxEzARBgNVBAoMClN1cGVyIEluYy4xFTATBgNVBAsMDFdlYiBTZWN1cml0
eTEWMBQGA1UEAwwNMTcyLjIyLjE2LjIwNTAeFw0yNDA5MDQwMjA2MDNaFw0zNDA5
MDIwMjA2MDNaMHUxCzAJBgNVBAYTAkNOMRAwDgYDVQQIDAdCZWlqaW5nMRAwDgYD
VQQHDAdCZWlqaW5nMRMwEQYDVQQKDApTdXBlciBJbmMuMRUwEwYDVQQLDAxXZWIg
U2VjdXJpdHkxFjAUBgNVBAMMDTE3Mi4yMi4xNi4yMDUwggEiMA0GCSqGSIb3DQEB
AQUAA4IBDwAwggEKAoIBAQDE7CSYmsCPIzZHsmrb1SUaXk523ueia/TkT4RzDCVA
bp4Xr4gpayX77AgSvHJY5/wGD2XVdDhepq+86FJza42CYq3i4ReZMfqKZK7vZkvp
D+COvD8Zun4vEYX5jTgVkI4dvpI/4aDOY9M78uEzOE/qSrIJFpnvtzZgjXGRqGrv
k6YT9qPDIAKaHJT0bW+uOydWVG1Tt+EejyEpYRHBDXe0TcioPSM9uCHHhXLLNUsX
ehAp8JLulbPVMutpGN+pK11hfgGEPIVClbtZnitIVqLhPGxhhzkmwk7mcEchMKug
2BxHWrMT/6Odsj+0Pz5KHjINLlt1jKh6t4dZj0abJNUdAgMBAAGjRTBDMAsGA1Ud
DwQEAwIF4DAdBgNVHSUEFjAUBggrBgEFBQcDAQYIKwYBBQUHAwIwFQYDVR0RBA4w
DIcEfwAAAYcErBYQzTANBgkqhkiG9w0BAQsFAAOCAQEAjMVetYrNH+hLMGOWnw8g
PhvZk9QQlmx4MfrP3Ovqbcb/mnb9R2fwaER3oSshEJRZjc8+sayhmKctAiz50kRQt
ObDdkwXHCaY+mwE7WhysH+jB5HNoYcfYaNclx4zsvkgytK64hHdYt5C8ub+E7oZD
txpgBIv0/Kcznjun9m9t9xYFxa/8ivxcCi2WvckN+s07XKUpUd6a2et/DEmFOov
50EfBzBRl70QH/9QlD1Q5DDr+OqfoJ+Ba37JzE+StCM6I+A9KpDsyz2XSZNBmKpz
204lZtj6RV5GwngPJNqkCTFuaMqRgoW339mSPedc3h6In24cfW0hcr8CviY3otbu
Ow==
-----END CERTIFICATE-----"
                            multiline
                            monospace
                            @input="handleInput"
                            class="certificate-input"
                        />
                    </div>
                </div>

                <!-- 解析结果区域 -->
                <div class="workspace-card result-card">
                    <div class="card-header">
                        <div class="card-title">
                            <div class="title-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </div>
                            <div class="title-text">
                                <h3>解析结果</h3>
                                <p>证书详细信息将显示在这里</p>
                            </div>
                        </div>
                        <div class="card-actions">
                            <c-button 
                                v-if="parsedCertificate" 
                                size="small" 
                                @click="exportResults"
                                class="export-btn"
                            >
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                导出
                            </c-button>
                        </div>
                    </div>
                    
                    <div class="card-content">
                        <div v-if="isLoading" class="loading-state">
                            <div class="loading-spinner"></div>
                            <p>正在解析证书...</p>
                        </div>
                        
                        <div v-else-if="error" class="error-state">
                            <div class="error-icon">
                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10.29 3.86L1.82 18A2 2 0 0 0 3.54 21H20.46A2 2 0 0 0 22.18 18L13.71 3.86A2 2 0 0 0 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 9V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <h4>解析失败</h4>
                            <p>{{ error }}</p>
                        </div>
                        
                        <div v-else-if="parsedCertificate" class="certificate-details">
                            <!-- 证书概览 -->
                            <div class="certificate-overview">
                                <h4>证书概览</h4>
                                <div class="overview-grid">
                                    <div class="overview-item">
                                        <span class="overview-label">主题:</span>
                                        <span class="overview-value">{{ parsedCertificate.subject }}</span>
                                    </div>
                                    <div class="overview-item">
                                        <span class="overview-label">颁发者:</span>
                                        <span class="overview-value">{{ parsedCertificate.issuer }}</span>
                                    </div>
                                    <div class="overview-item">
                                        <span class="overview-label">序列号:</span>
                                        <span class="overview-value">{{ parsedCertificate.serialNumber }}</span>
                                    </div>
                                    <div class="overview-item">
                                        <span class="overview-label">版本:</span>
                                        <span class="overview-value">{{ parsedCertificate.version }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 有效期信息 -->
                            <div class="validity-info">
                                <h4>有效期信息</h4>
                                <div class="validity-grid">
                                    <div class="validity-item">
                                        <span class="validity-label">生效时间:</span>
                                        <span class="validity-value">{{ formatDate(parsedCertificate.validFrom) }}</span>
                                    </div>
                                    <div class="validity-item">
                                        <span class="validity-label">过期时间:</span>
                                        <span class="validity-value" :class="getExpiryClass(parsedCertificate.validTo)">
                                            {{ formatDate(parsedCertificate.validTo) }}
                                        </span>
                                    </div>
                                    <div class="validity-item">
                                        <span class="validity-label">剩余天数:</span>
                                        <span class="validity-value" :class="getExpiryClass(parsedCertificate.validTo)">
                                            {{ getDaysRemaining(parsedCertificate.validTo) }} 天
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <!-- 公钥信息 -->
                            <div class="public-key-info">
                                <h4>公钥信息</h4>
                                <div class="key-grid">
                                    <div class="key-item">
                                        <span class="key-label">算法:</span>
                                        <span class="key-value">{{ parsedCertificate.publicKeyAlgorithm }}</span>
                                    </div>
                                    <div class="key-item">
                                        <span class="key-label">密钥长度:</span>
                                        <span class="key-value">{{ parsedCertificate.publicKeySize }} 位</span>
                                    </div>
                                    <div class="key-item">
                                        <span class="key-label">公钥:</span>
                                        <span class="key-value">{{ parsedCertificate.publicKey }}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- 扩展信息 -->
                            <div v-if="parsedCertificate.extensions" class="extensions-info">
                                <h4>扩展信息</h4>
                                <div class="extensions-list">
                                    <div 
                                        v-for="(extension, index) in parsedCertificate.extensions" 
                                        :key="index"
                                        class="extension-item"
                                    >
                                        <div class="extension-header">
                                            <span class="extension-name">{{ extension.name }}</span>
                                            <span class="extension-critical" v-if="extension.critical">关键</span>
                                        </div>
                                        <div class="extension-value">{{ extension.value }}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 签名信息 -->
                            <div class="signature-info">
                                <h4>签名信息</h4>
                                <div class="signature-grid">
                                    <div class="signature-item">
                                        <span class="signature-label">签名算法:</span>
                                        <span class="signature-value">{{ parsedCertificate.signatureAlgorithm }}</span>
                                    </div>
                                    <div class="signature-item">
                                        <span class="signature-label">签名值:</span>
                                        <span class="signature-value">{{ parsedCertificate.signature }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div v-else class="empty-state">
                            <div class="empty-icon">
                                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 18.9609 21.7893 19.3359 21.4142C19.7109 21.0391 19.9219 20.5304 19.9219 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <h4>准备解析</h4>
                            <p>粘贴 PEM 格式证书内容开始解析</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-bar">
                <div class="action-buttons">
                    <c-button 
                        @click="parseCertificate" 
                        :loading="isLoading" 
                        type="primary"
                        size="large"
                        class="parse-btn"
                        :disabled="!certificateInput.trim()"
                    >
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 18.9609 21.7893 19.3359 21.4142C19.7109 21.0391 19.9219 20.5304 19.9219 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        解析证书
                    </c-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useCopy } from '@/composable/copy';
import * as asn1js from 'asn1js';
import * as pkijs from 'pkijs';

interface CertificateExtension {
    name: string;
    value: string;
    critical: boolean;
}

interface ParsedCertificate {
    subject: string;
    issuer: string;
    serialNumber: string;
    version: string;
    validFrom: Date;
    validTo: Date;
    publicKeyAlgorithm: string;
    publicKeySize: number;
    publicKey: string;
    signatureAlgorithm: string;
    signature: string;
    extensions?: CertificateExtension[];
}

const certificateInput = ref('');
const isLoading = ref(false);
const error = ref('');
const parsedCertificate = ref<ParsedCertificate | null>(null);

const { copy } = useCopy();

const clearAll = () => {
    certificateInput.value = '';
    error.value = '';
    parsedCertificate.value = null;
};

const handleInput = () => {
    error.value = '';
    parsedCertificate.value = null;
};

const getExpiryClass = (validTo: Date) => {
    const daysRemaining = getDaysRemaining(validTo);
    if (daysRemaining <= 0) return 'expired';
    if (daysRemaining <= 30) return 'warning';
    return 'valid';
};

const getDaysRemaining = (validTo: Date) => {
    const now = new Date();
    const diffTime = validTo.getTime() - now.getTime();
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
};

const formatDate = (date: Date) => {
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
};

const parseCertificate = async () => {
    if (!certificateInput.value.trim()) {
        return;
    }

    isLoading.value = true;
    error.value = '';
    parsedCertificate.value = null;

    try {
        const certText = certificateInput.value.trim();
        
        // 验证PEM格式
        if (!certText.includes('-----BEGIN CERTIFICATE-----') || 
            !certText.includes('-----END CERTIFICATE-----')) {
            throw new Error('无效的PEM格式证书');
        }

        // 提取Base64编码的证书数据
        const base64Data = certText
            .replace(/-----BEGIN CERTIFICATE-----/, '')
            .replace(/-----END CERTIFICATE-----/, '')
            .replace(/\s/g, '');

        if (!base64Data) {
            throw new Error('无法提取证书数据');
        }

        // 解码Base64数据
        const binaryData = atob(base64Data);
        const uint8Array = new Uint8Array(binaryData.length);
        for (let i = 0; i < binaryData.length; i++) {
            uint8Array[i] = binaryData.charCodeAt(i);
        }

        // 解析ASN.1结构
        const asn1 = asn1js.fromBER(uint8Array.buffer);
        if (asn1.offset === -1) {
            throw new Error('无效的证书格式');
        }

        // 使用PKIjs解析证书
        const certificate = new pkijs.Certificate({ schema: asn1.result });
        
        // 解析证书信息（使用any类型避免TypeScript错误）
        const cert = certificate as any;
        const parsedCert: ParsedCertificate = {
            subject: formatDN(cert.subject),
            issuer: formatDN(cert.issuer),
            serialNumber: cert.serialNumber?.valueBlock?.valueHexView?.toString('hex')?.toUpperCase() || 'Unknown',
            version: cert.version?.toString() || 'Unknown',
            validFrom: cert.notBefore?.value || new Date(),
            validTo: cert.notAfter?.value || new Date(),
            publicKeyAlgorithm: getAlgorithmName(cert.subjectPublicKeyInfo?.algorithm),
            publicKeySize: getPublicKeySize(cert.subjectPublicKeyInfo),
            publicKey: cert.subjectPublicKeyInfo?.subjectPublicKey?.valueBlock?.valueHexView ? 
                btoa(String.fromCharCode(...new Uint8Array(cert.subjectPublicKeyInfo.subjectPublicKey.valueBlock.valueHexView))) : 'Unknown',
            signatureAlgorithm: getAlgorithmName(cert.signatureAlgorithm),
            signature: cert.signature?.valueBlock?.valueHexView ? 
                btoa(String.fromCharCode(...new Uint8Array(cert.signature.valueBlock.valueHexView))) : 'Unknown',
            extensions: parseExtensions(cert.extensions)
        };

        parsedCertificate.value = parsedCert;
    } catch (err) {
        console.error('证书解析错误:', err);
        error.value = err instanceof Error ? err.message : '解析证书时发生错误';
    } finally {
        isLoading.value = false;
    }
};

// 格式化DN（Distinguished Name）
const formatDN = (dn: any): string => {
    if (!dn || !dn.typesAndValues) return 'Unknown';
    
    return dn.typesAndValues.map((tv: any) => {
        const type = tv.type;
        const value = tv.value.valueBlock.value;
        return `${type}=${value}`;
    }).join(', ');
};

// 获取算法名称
const getAlgorithmName = (algorithm: any): string => {
    if (!algorithm || !algorithm.algorithmId) return 'Unknown';
    
    const oid = algorithm.algorithmId;
    const algorithmMap: Record<string, string> = {
        '1.2.840.113549.1.1.1': 'RSA',
        '1.2.840.113549.1.1.11': 'sha256WithRSAEncryption',
        '1.2.840.113549.1.1.12': 'sha384WithRSAEncryption',
        '1.2.840.113549.1.1.13': 'sha512WithRSAEncryption',
        '1.2.840.10045.2.1': 'EC',
        '1.2.840.10045.4.3.2': 'ecdsa-with-SHA256',
        '1.2.840.10045.4.3.3': 'ecdsa-with-SHA384',
        '1.2.840.10045.4.3.4': 'ecdsa-with-SHA512'
    };
    
    return algorithmMap[oid] || oid;
};

// 获取公钥大小
const getPublicKeySize = (publicKeyInfo: any): number => {
    if (!publicKeyInfo || !publicKeyInfo.subjectPublicKey) return 0;
    
    const keyData = publicKeyInfo.subjectPublicKey.valueBlock.valueHexView;
    // 这是一个简化的计算，实际应该根据算法类型来计算
    return keyData.length * 8;
};

// 解析扩展
const parseExtensions = (extensions: any): CertificateExtension[] => {
    if (!extensions || !extensions.length) return [];
    
    return extensions.map((ext: any) => {
        let name = 'Unknown';
        let value = 'Unknown';
        
        if (ext.extnID) {
            const oid = ext.extnID;
            const extensionMap: Record<string, string> = {
                '2.5.29.15': 'Key Usage',
                '2.5.29.19': 'Basic Constraints',
                '2.5.29.17': 'Subject Alternative Name',
                '2.5.29.37': 'Extended Key Usage',
                '2.5.29.35': 'Authority Key Identifier',
                '2.5.29.14': 'Subject Key Identifier'
            };
            name = extensionMap[oid] || oid;
        }
        
        if (ext.extnValue) {
            try {
                const extnValue = asn1js.fromBER(ext.extnValue.valueBlock.valueHexView);
                if (extnValue.offset !== -1) {
                    value = extnValue.result.toString();
                }
            } catch (e) {
                value = '无法解析';
            }
        }
        
        return {
            name,
            value,
            critical: ext.critical || false
        };
    });
};

const exportResults = async () => {
    if (!parsedCertificate.value) return;
    
    const exportData = {
        timestamp: new Date().toISOString(),
        certificateInfo: parsedCertificate.value
    };
    
    const jsonString = JSON.stringify(exportData, null, 2);
    await copy(jsonString);
};
</script>

<style scoped>
.ssl-certificate-parser {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 1rem;
}

/* 主要工作区域 */
.main-workspace {
    margin: 0 2rem;
}

.workspace-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 1200px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
}

.workspace-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.workspace-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
}

.card-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    padding: 0.5rem;
    color: white;
}

.title-text h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.title-text p {
    font-size: 0.9rem;
    margin: 0.25rem 0 0 0;
    color: #64748b;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.card-content {
    padding: 1.5rem;
}

/* 输入区域样式 */
.certificate-input {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.certificate-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 按钮样式 */
.clear-btn, .export-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.clear-btn {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.clear-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.export-btn {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    color: #0284c7;
}

.export-btn:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
}

/* 操作按钮区域 */
.action-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.action-buttons {
    display: flex;
    gap: 1rem;
}

.parse-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

.parse-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.parse-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 加载状态 */
.loading-state {
    text-align: center;
    padding: 2rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误状态 */
.error-state {
    text-align: center;
    padding: 2rem;
    color: #dc2626;
}

.error-icon {
    margin-bottom: 1rem;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

.empty-icon {
    margin-bottom: 1rem;
}

/* 证书详情样式 */
.certificate-details {
    space-y: 1.5rem;
}

.certificate-overview, .validity-info, .public-key-info, .extensions-info, .signature-info {
    margin-bottom: 1.5rem;
}

.certificate-overview h4, .validity-info h4, .public-key-info h4, .extensions-info h4, .signature-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.overview-grid, .validity-grid, .key-grid, .signature-grid {
    display: grid;
    gap: 0.75rem;
}

.overview-item, .validity-item, .key-item, .signature-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.overview-label, .validity-label, .key-label, .signature-label {
    font-weight: 500;
    color: #6b7280;
    font-size: 0.9rem;
    min-width: 100px;
}

.overview-value, .validity-value, .key-value, .signature-value {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
    text-align: right;
    word-break: break-all;
    flex: 1;
    margin-left: 1rem;
}

.validity-value.expired {
    color: #dc2626;
}

.validity-value.warning {
    color: #d97706;
}

.validity-value.valid {
    color: #059669;
}

/* 扩展信息样式 */
.extensions-list {
    display: grid;
    gap: 1rem;
}

.extension-item {
    background: #f9fafb;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

.extension-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.extension-name {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.extension-critical {
    background: #fef3c7;
    color: #d97706;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.extension-value {
    color: #6b7280;
    font-size: 0.85rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ssl-certificate-parser {
        padding: 1rem 0.5rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .header-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .action-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .card-actions {
        align-self: flex-end;
    }
    
    .workspace-grid {
        gap: 1rem;
    }
    
    .card-content {
        padding: 1rem;
    }
    
    .overview-item, .validity-item, .key-item, .signature-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .overview-value, .validity-value, .key-value, .signature-value {
        text-align: left;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.5rem;
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    .title-text h3 {
        font-size: 1rem;
    }
    
    .title-text p {
        font-size: 0.8rem;
    }
}
</style>
